<a href='https://github.com/angular/angular.js/edit/v1.2.x/docs/content/guide/di.ngdoc?message=docs(guide%2FDependency Injection)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>


<h1 id="dependency-injection">Dependency Injection</h1>
<p>Dependency Injection (DI) is a software design pattern that deals with how components get hold of
their dependencies.</p>
<p>The Angular injector subsystem is in charge of creating components, resolving their dependencies,
and providing them to other components as requested.</p>
<p>For in-depth discussion about DI, see
<a href="http://en.wikipedia.org/wiki/Dependency_injection">Dependency Injection</a> at Wikipedia,
<a href="http://martinfowler.com/articles/injection.html">Inversion of Control</a> by Martin Fowler,
or read about DI in your favorite software design pattern book.</p>
<h2 id="di-in-a-nutshell">DI in a Nutshell</h2>
<p>There are only three ways a component (object or function) can get a hold of its dependencies:</p>
<ol>
<li>The component can create the dependency, typically using the <code>new</code> operator.</li>
<li>The component can look up the dependency, by referring to a global variable.</li>
<li>The component can have the dependency passed to it where it is needed.</li>
</ol>
<p>The first two options of creating or looking up dependencies are not optimal because they hard
code the dependency to the component. This makes it difficult, if not impossible, to modify the
dependencies. This is especially problematic in tests, where it is often desirable to provide mock
dependencies for test isolation.</p>
<p>The third option is the most viable, since it removes the responsibility of locating the
dependency from the component. The dependency is simply handed to the component.</p>
<pre><code class="lang-js">function SomeClass(greeter) {
this.greeter = greeter;
}

SomeClass.prototype.doSomething = function(name) {
this.greeter.greet(name);
}
</code></pre>
<p>In the above example <code>SomeClass</code> is not concerned with creating or locating the <code>greeter</code>
dependency, it is simply handed the <code>greeter</code> when it is instantiated.</p>
<p>This is desirable, but it puts the responsibility of getting hold of the dependency on the
code that constructs <code>SomeClass</code>.</p>
<p><img class="pull-right" style="padding-left: 3em; padding-bottom: 1em;" src="img/guide/concepts-module-injector.png"></p>
<p>To manage the responsibility of dependency creation, each Angular application has an <a href="api/ng/function/angular.injector">injector</a>. The injector is a
<a href="http://en.wikipedia.org/wiki/Service_locator_pattern">service locator</a> that is responsible for
construction and lookup of dependencies.</p>
<p>Here is an example of using the injector service:</p>
<pre><code class="lang-js">// Provide the wiring information in a module
var myModule = angular.module(&#39;myModule&#39;, []);
</code></pre>
<p>Teach the injector how to build a <code>greeter</code> service. Notice that <code>greeter</code> is dependent on the
<code>$window</code> service. The <code>greeter</code> service is an object that contains a <code>greet</code> method.</p>
<pre><code class="lang-js">myModule.factory(&#39;greeter&#39;, function($window) {
return {
  greet: function(text) {
    $window.alert(text);
  }
};
});
</code></pre>
<p>Create a new injector that can provide components defined in our <code>myModule</code> module and request our
<code>greeter</code> service from the injector. (This is usually done automatically by angular bootstrap).</p>
<pre><code class="lang-js">var injector = angular.injector([&#39;myModule&#39;, &#39;ng&#39;]);
var greeter = injector.get(&#39;greeter&#39;);
</code></pre>
<p>Asking for dependencies solves the issue of hard coding, but it also means that the injector needs
to be passed throughout the application. Passing the injector breaks the
<a href="http://en.wikipedia.org/wiki/Law_of_Demeter">Law of Demeter</a>. To remedy this, we use a declarative
notation in our HTML templates, to hand the responsibility of creating components over to the
injector, as in this example:</p>
<pre><code class="lang-html">&lt;div ng-controller=&quot;MyController&quot;&gt;
&lt;button ng-click=&quot;sayHello()&quot;&gt;Hello&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<pre><code class="lang-js">function MyController($scope, greeter) {
$scope.sayHello = function() {
  greeter.greet(&#39;Hello World&#39;);
};
}
</code></pre>
<p>When Angular compiles the HTML, it processes the <code>ng-controller</code> directive, which in turn
asks the injector to create an instance of the controller and its dependencies.</p>
<pre><code class="lang-js">injector.instantiate(MyController);
</code></pre>
<p>This is all done behind the scenes. Notice that by having the <code>ng-controller</code> ask the injector to
instantiate the class, it can satisfy all of the dependencies of <code>MyController</code> without the
controller ever knowing about the injector.</p>
<p>This is the best outcome. The application code simply declares the dependencies it needs, without
having to deal with the injector. This setup does not break the Law of Demeter.</p>
<h2 id="dependency-annotation">Dependency Annotation</h2>
<p><strong>How does the injector know what components need to be injected?</strong></p>
<p>The application developer needs to provide annotation information that the injector uses in order
to resolve the dependencies. Throughout Angular, certain API functions are invoked using the
injector, as per the API documentation. The injector needs to know what services to inject into
the function. There are three equivalent ways of annotating your code with service name
information:</p>
<ul>
<li>Implicitly from the function parameter names</li>
<li>Using the <code>$inject</code> property annotation</li>
<li>Using the inline array annotation</li>
</ul>
<p>These can be used interchangeably as you see fit and are equivalent.</p>
<h3 id="implicit-dependencies">Implicit Dependencies</h3>
<p>The simplest way to get hold of the dependencies is to assume that the function parameter names
are the names of the dependencies.</p>
<pre><code class="lang-js">function MyController($scope, greeter) {
// ...
}
</code></pre>
<p>Given a function the injector can infer the names of the services to inject by examining the
function declaration and extracting the parameter names. In the above example <code>$scope</code>, and
<code>greeter</code> are two services which need to be injected into the function.</p>
<p>While straightforward, this method will not work with JavaScript minifiers/obfuscators as they
rename the method parameter names. This makes this way of annotating only useful for
<a href="http://www.pretotyping.org/">pretotyping</a>, and demo applications.</p>
<h3 id="-inject-property-annotation"><code>$inject</code> Property Annotation</h3>
<p>To allow the minifiers to rename the function parameters and still be able to inject the right services,
the function needs to be annotated with the <code>$inject</code> property. The <code>$inject</code> property is an array
of service names to inject.</p>
<pre><code class="lang-js">var MyController = function(renamed$scope, renamedGreeter) {
...
}
MyController[&#39;$inject&#39;] = [&#39;$scope&#39;, &#39;greeter&#39;];
</code></pre>
<p>In this scenario the ordering of the values in the <code>$inject</code> array must match the ordering of the
arguments to inject. Using the above code snippet as an example, <code>$scope</code> will be injected into
<code>renamed$scope</code> and <code>greeter</code> into <code>renamedGreeter</code>. Care must be taken that the <code>$inject</code>
annotation is kept in sync with the actual arguments in the function declaration.</p>
<p>This method of annotation is useful for controller declarations since it assigns the annotation
information with the function.</p>
<h3 id="inline-array-annotation">Inline Array Annotation</h3>
<p>Sometimes using the <code>$inject</code> annotation style is not convenient such as when annotating
directives or services defined inline by a factory function.</p>
<p>For example:</p>
<pre><code class="lang-js">someModule.factory(&#39;greeter&#39;, function($window) {
// ...
});
</code></pre>
<p>Results in code bloat due to needing a temporary variable:</p>
<pre><code class="lang-js">var greeterFactory = function(renamed$window) {
// ...
};

greeterFactory.$inject = [&#39;$window&#39;];

someModule.factory(&#39;greeter&#39;, greeterFactory);
</code></pre>
<p>For this reason the third annotation style is provided as well.</p>
<pre><code class="lang-js">someModule.factory(&#39;greeter&#39;, [&#39;$window&#39;, function(renamed$window) {
// ...
}]);
</code></pre>
<p>Here, instead of simply providing the factory function, we pass an array whose elements consist of
a list of strings (the names of the dependencies) followed by the function itself.</p>
<p>Keep in mind that all of the annotation styles are equivalent and can be used anywhere in Angular
where injection is supported.</p>
<h2 id="where-can-i-use-di-">Where Can I Use DI?</h2>
<p>DI is pervasive throughout Angular. You can use it when defining components or when providing <code>run</code>
and <code>config</code> blocks for a module.</p>
<ul>
<li><p>Components such as services, directives, filters and animations are defined by an injectable factory
method or constructor function.  These components can be injected with &quot;service&quot; and &quot;value&quot;
components as dependencies.</p>
</li>
<li><p>The <code>run</code> method accepts a function, which can be injected with &quot;service&quot;, &quot;value&quot; and &quot;constant&quot;
components as dependencies. Note that you cannot inject &quot;providers&quot; into <code>run</code> blocks.</p>
</li>
<li><p>The <code>config</code> method accepts a function, which can be injected with &quot;provider&quot; and &quot;constant&quot;
components as dependencies.  Note that you cannot inject &quot;service&quot; or &quot;value&quot; components into
configuration</p>
</li>
<li><p>Controllers are defined by a constructor function, which can be injected with any of the &quot;service&quot;
and &quot;value&quot; components as dependencies, but they can also be provided with special dependencies. See
<a href="guide/di#controllers">Controllers</a> below for a list of these special dependencies.</p>
</li>
</ul>
<p>See <a href="guide/module#module-loading-dependencies">Modules</a> for more details about injecting dependencies
into <code>run</code> and <code>config</code> blocks.</p>
<h3 id="factory-methods">Factory Methods</h3>
<p>Factory methods are responsible for creating most objects in Angular. Examples are directives,
services, and filters. The factory methods are registered with the module, and the recommended way
of declaring factories is:</p>
<pre><code class="lang-js">angular.module(&#39;myModule&#39;, [])
.factory(&#39;serviceId&#39;, [&#39;depService&#39;, function(depService) {
  ...
}])
.directive(&#39;directiveName&#39;, [&#39;depService&#39;, function(depService) {
  ...
}])
.filter(&#39;filterName&#39;, [&#39;depService&#39;, function(depService) {
  ...
}]);
</code></pre>
<h3 id="module-methods">Module Methods</h3>
<p>We can specify functions to run at configuration and run time for a module by calling the <code>run</code> and
<code>config</code> methods. These functions are injectable with dependencies just like the factory functions
above.</p>
<pre><code class="lang-js">angular.module(&#39;myModule&#39;, [])
.config([&#39;depProvider&#39;, function(depProvider){
  ...
}])
.run([&#39;depService&#39;, function(depService) {
  ...
}]);
</code></pre>
<h3 id="controllers">Controllers</h3>
<p>Controllers are &quot;classes&quot; or &quot;constructor functions&quot; that are responsible for providing the
application behavior that supports the declarative markup in the template. The recommended way of
declaring Controllers is using the array notation:</p>
<pre><code class="lang-js">someModule.controller(&#39;MyController&#39;, [&#39;$scope&#39;, &#39;dep1&#39;, &#39;dep2&#39;, function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
  ...
}
...
}]);
</code></pre>
<p>This avoids the creation of global functions for controllers and also protects against minification.</p>
<p>Controllers are special in that, unlike services, there can be many instances of them in the
application. For example, there would be one instance for every <code>ng-controller</code> directive in the template.</p>
<p>Moreover, additional dependencies are made available to Controllers:</p>
<ul>
<li><a href="guide/scope"><code>$scope</code></a>: Controllers are always associated with a point in the DOM and so are provided with
access to the <a href="guide/scope">scope</a> at that point. Other components, such as services only have access to the
singleton <a href="api/ng/service/$rootScope"><code>$rootScope</code></a> service.</li>
<li><a href="api/ngRoute/service/$route"><code>$route</code></a> resolves: If a controller is instantiated as part of a route, then any values that
are resolved as part of the route are made available for injection into the controller.</li>
</ul>


